<template>
    <div>
      <h1>Vote List</h1>
      <el-table :data="votes" style="width: 100%">
        <el-table-column prop="question" label="Question"></el-table-column>
        <el-table-column label="Actions">
          <template slot-scope="scope">
            <el-button @click="viewVote(scope.row.id)">View</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  
  export default {
    name: 'VoteList',
    data() {
      return {
        votes: []
      };
    },
    created() {
      this.fetchVotes();
    },
    methods: {
      async fetchVotes() {
        const response = await axios.get('/api/v1/votes');
        this.votes = response.data;
        console.log(this.votes)
      },
      viewVote(id) {
        this.$router.push(`/vote/${id}`);
      }
    }
  };
  </script>